<template>
  <div id="app">
      <div class="tabLeft">
        <div  ref="com" class="">
          <p @click="changeSpan">1111</p>
          <ul v-if="change == false">
            <li>编程入门</li>
              <li :class="{color: change? '#fff':'#cdcdcd'}" v-for="(item, index) in list" @click="showSerial(item.Serial,item)" :key="index">{{item.title}}</li>
          </ul>
          </div> 
          
      </div>
        <div ref="tabRight" class="right">
          <!-- <img class="showImg" v-if="span == 1" v-oss-src="'catalog/ic_yincang_right@2x.png'" ref="span" @click="changeSpan(0)" />
          <img class="showImg" v-else ref="span" v-oss-src="'catalog/ic_yincang_left@2x.png'" @click="changeSpan(1)" /> -->
          <span :class="[ change ? 'span1': 'span2' ]" @click="changeSpan(change = !change)"></span>
          <p>{{title}}</p>
          <div class="tabRight">
            <keep-alive>
              <component :is="show"></component>
            </keep-alive>
          </div>    
        </div>
  </div>
</template>
<script>
import one from './component/one'
import two from './component/two'
import three from './component/three'
import four from './component/four'
import five from './component/five'
import six from './component/six'
export default {
  name: 'work',
  data(){
    return{
        show:'one',
        change:false,
        title:'',
        list:[
            {title:'01 - HTML页面演示',Serial:'one',count:0},
            {title:'02 - 如何开始',Serial:'two',count:1},
            {title:'03 - 开始便携HTML页面',Serial:'three',count:2},
            {title:'04 - 开始标记',Serial:'four',count:3},
            {title:'05 - 插入图片',Serial:'five',count:4},
            {title:'06 - 超链接',Serial:'six',count:5},
        ],
    }
  },
  components: { one, two, three, four, five, six },
  created(){
    this.title = this.list[0].title
  },
  methods:{
      changeSpan(change){
        this.change = change;
        this.$refs.tabRight.style.width = '100%';
      },
      showSerial(name,item){
          this.show = name;
          this.title = item.title;
      }
  }
}
</script>
<style>
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
#app{
    width: 100%;
    height: 700px;
    background: #141c3b;
    color: #cdcdcd;
    font-size: 14px;
    display: flex;
}
 span{
    cursor: pointer;
    display: block;
    width: 0;
    height: 0;
    border-top: 9px transparent solid;
    border-bottom: 9px transparent solid;
    border-right: 11px solid #fff;
    position: absolute;
    left: 4%;
    top: 2%;
}
.span1 {
    transform: translate(0, -50%);
}
.span2 {
    transform: translate(0, -50%) rotate(180deg);
}
.tabLeft li{
    height: 50px;
    width: 160px;
    line-height: 30px;
    margin-left: 30px;
    list-style: none;
}
.tabLeft li:first-child{
    font-size: 20px;
    position: absolute;
    top:20px;
}
.tabLeft ul{
    width: 16%;
    height: 700px;
    padding: 0;
    padding-top: 90px ;
    position: relative;
}

.right{
    width: 80%;
    height: 700px;
    position: relative;
}
.tabRight{
    width: 94%;
    height: 650px;
    background: #fff;
    float: left;
    margin: 10px 30px 30px;
    position: relative;
}
p{
  text-align: center;
  line-height: 20px;
}

</style>
